<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags" %>
<%@ page isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>山西煤炭现货公路交易系统客户端</title>
 <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/bootstrap/css/bootstrap.min.css"/>
     <!-- daterange picker -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/plugins/daterangepicker/daterangepicker-bs3.css"/>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/font-awesome/css/font-awesome.min.css"/>
    <!-- Ionicons -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/ionicons/css/ionicons.min.css"/>
    <!-- jvectormap -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/plugins/jvectormap/jquery-jvectormap-1.2.2.css"/>
    <!-- Theme style -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/dist/css/AdminLTE.min.css"/>
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/dist/css/skins/_all-skins.min.css"/>
     <!-- DataTables -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/plugins/datatables/dataTables.bootstrap.css"/>
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/dist/css/skins/_all-skins.min.css"/>
	<!-- jQuery 2.1.4 -->
    <script src="<s:url value="/resources"/>/adminlte/plugins/jQuery/jQuery-2.1.4.min.js"></script>
	<!-- Bootstrap 3.3.5 -->
    <script src="<s:url value="/resources"/>/adminlte/bootstrap/js/bootstrap.min.js"></script>
	 <!-- AdminLTE App -->
    <script src="<s:url value="/resources"/>/adminlte/dist/js/app.min.js"></script>
    <!-- date-range-picker -->
<script src="<s:url value="/resources"/>/adminlte/moment.min.js"></script>
<script src="<s:url value="/resources"/>/adminlte/plugins/daterangepicker/daterangepicker.js"></script>
    <!-- Theme style -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/dist/css/AdminLTE.min.css"/>
    <!-- DataTables -->
    <script src="<s:url value="/resources"/>/adminlte/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="<s:url value="/resources"/>/adminlte/plugins/datatables/dataTables.bootstrap.min.js"></script>
    <!-- default -->
     <script src="<s:url value="/resources"/>/adminlte/default.js"></script>
     <!-- 引入 echarts.js -->
    <script src="<s:url value="/resources"/>/echarts/echarts.min.js"></script>
      <script src="<s:url value="/resources"/>/adminlte/default_logistical.js"></script>
      <script src="<s:url value="/resources"/>/adminlte/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
	 $(function(){  
	   // loadUserInfo();
	   loadMenu("${user.roleType}","${menuid}",${menuList});
	   dataTab("dataTab",true,false,false,false,true,false,"<s:url value="/resources"/>/adminlte/dataTabBootstrapCN.json");
	   barAndLine("interactive",${xAxis},${zhouyxc},${tieldrl},${gongldrl},${tuntl},${changc});
	   if(document.getElementById("zhouyxc1").value=="1"){
		   document.getElementById("zhouyxcBox").checked=true; 
	   }else{
		   document.getElementById("zhouyxcBox").checked=false; 
		}
	   if(document.getElementById("tieldrl1").value=="1"){
		   document.getElementById("tieldrlBox").checked=true; 
	   }else{
		   document.getElementById("tieldrlBox").checked=false; 
		}
	   if(document.getElementById("gongldrl1").value=="1"){
		   document.getElementById("gongldrlBox").checked=true; 
	   }else{
		   document.getElementById("gongldrlBox").checked=false; 
		}
	   if(document.getElementById("tuntl1").value=="1"){
		   document.getElementById("tuntlBox").checked=true; 
	   }else{
		   document.getElementById("tuntlBox").checked=false; 
		}
	   if(document.getElementById("changc1").value=="1"){
		   document.getElementById("changcBox").checked=true; 
	   }else{
		   document.getElementById("changcBox").checked=false; 
		}
	 });
	function clickSum(){
		if(!document.getElementById("zhouyxcBox").checked){
			document.getElementById("zhouyxc1").value="0";
		}else{
			document.getElementById("zhouyxc1").value="1";
		}
		if(!document.getElementById("tieldrlBox").checked){
			document.getElementById("tieldrl1").value="0";
		}else{
			document.getElementById("tieldrl1").value="1";
		}
		if(!document.getElementById("gongldrlBox").checked){
			document.getElementById("gongldrl1").value="0";
		}else{
			document.getElementById("gongldrl1").value="1";
		}
		if(!document.getElementById("tuntlBox").checked){
			document.getElementById("tuntl1").value="0";
		}else{
			document.getElementById("tuntl1").value="1";
		}
		if(!document.getElementById("changcBox").checked){
			document.getElementById("changc1").value="0";
		}else{
			document.getElementById("changc1").value="1";
		}
		
		
		if(validateDay("1")){
		    document.getElementById("form1").submit();
		}else{
			return false;
		}
	}
	/**
	 * 柱状图
	 * @param chartName
	 * @param xData
	 */
	function barAndLine(chartName,xData,zhouyxc,tieldrl,gongldrl,tuntl,changc) {

		// 基于准备好的dom，初始化echarts实例
	    var myChart = echarts.init(document.getElementById(chartName));
	    // 指定图表的配置项和数据
	    option = {
	    	    tooltip: {
	    	        trigger: 'axis'
	    	    },
	    	    toolbox: {
	    	    	
	    	        feature: {
	    	            dataView: {y: 10,show: true, readOnly: false},
	    	            magicType: {y: 10,show: true, type: ['line', 'bar']},
	    	            restore: {y: 10,show: true},
	    	            saveAsImage: {y: 10,show: true}
	    	        }
	    	    },
	    	    legend: {
	    	    	borderWidth: 0,
	    	    	x: 2,
	    	        y: 350,//显示文字的位置
	    	        data:['昼夜卸车(车)','铁路调入量(万吨)','公路调入量(万吨)','吞吐量(万吨)','场存(万吨)']
	    	    },
	    	    xAxis: [
	    	        {
	    	            type: 'category',
	    	            data:xData
	    	        }
	    	    ],
	    	    grid: { // 控制图的大小，调整下面这些值就可以，
	                x: 80,
	                x2: 80,
	                y2: 100,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
	            },
	    	    yAxis: [
	    	        {
	    	            type: 'value',
	    	            name: '（单位：万吨）'
	    	        }
	    	    ],
	    	    series: [
	    	        {
	    	            name:'昼夜卸车(车)',
	    	            type:'bar',
	    	            data:zhouyxc
	    	        },
	    	        {
	    	            name:'铁路调入量(万吨)',
	    	            type:'bar',
	    	            data:tieldrl
	    	        },
	    	        {
	    	            name:'公路调入量(万吨)',
	    	            type:'bar',
	    	            data:gongldrl
	    	        },
	    	        {
	    	            name:'吞吐量(万吨)',
	    	            type:'bar',
	    	            data:tuntl
	    	        },
	    	        {
	    	            name:'场存(万吨)',
	    	            type:'bar',
	    	            data:changc
	    	        }
	    	       
	    	    ]
	    	};
	    
	    // 使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
	}

				 
</script>
</head>
<body class="skin-blue sidebar-mini">
<div class="wrapper" style="overflow:hidden">
<%@ include file="../../header.jsp" %>
<%@ include file="../../sidebar.jsp" %>
<div class="content-wrapper" >
<!-- form start -->
<form id="form1" onsubmit="return clickSum()" action="<s:url value="/"/>/infoCenterSum/getInfo025" method="post">
<!-- <iframe src="mtzq_html/classify1.html" name="main" class="iframe" frameborder="0" id="main" width="100%"  scrolling=no></iframe> -->
        <!-- Content Header (Page header) -->
        <div class="content-header">
          <h1>信息分析<small>天津港煤炭调度数</small></h1>
          <ol class="breadcrumb">
            <li><a href="<s:url value="/"/>/index.jsp"><i class="fa fa-dashboard"></i>首页</a></li>
            <li><a href="#" id="location1"></a></li>
            <li class="active" id="location2"></li>
          </ol>
        </div>

        <!-- Main content -->
        <div class="content">
        <div class="row">
        <!-- left column -->
            <div class="col-md-9">
              <!-- general form elements -->
              <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title">查询条件</h3>
                </div><!-- /.box-header -->
                  <div class="form-group">
                    <label style="padding-left: 15px;">日期范围:</label>
                    <div class="input-group" style="padding-left: 15px;">
                      <div class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                      </div>
                      <input type="text" style="width:30%;padding-left: 17px;height: 34px;" class="" id="startDate" name="startDate" value="${startDate}" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})">
                      &nbsp;&nbsp;--&nbsp;&nbsp;<input type="text" style="width:30%;;padding-left: 27px;height: 34px;" class="" id="endDate" name="endDate" value="${endDate}" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})">
                    &nbsp;&nbsp;&nbsp;<button class="btn btn-primary"  type="submit">查询</button>
                    </div><!-- /.input group -->
                    </br>
                    </div>

               
              </div><!-- /.box -->
			
              <!-- Form Element sizes -->
              <div class="row">
		            <div class="col-xs-12">
		             <!-- interactive chart -->
		              <div class="box box-primary">
		                <div class="box-header with-border" style="display:block;text-align: center">
		                  <i class="fa fa-bar-chart-o"></i>
		                  <h3 class="box-title">天津港煤炭调度数</h3>
		                  
		                </div>
		                <div class="box-body" style="padding-left: 2px;">
		                  <div id="interactive" style="width:95%;height: 400px;padding-left: 5px;"></div>
		                  &nbsp;&nbsp;&nbsp;&nbsp;<font color="red">天津港务集团</font>
		                </div><!-- /.box-body-->
		              </div><!-- /.box -->
		
		            </div><!-- /.col (LEFT) -->
	          </div><!-- /.row -->

              <div class="box box-danger">
                <div class="box-header with-border">
                  <h3 class="box-title">数据列表</h3>
                </div>
                <div class="box-body">
                  <table id="dataTab" class="table table-bordered">
		                  <thead>
		                      <tr>
		                        <th  style="text-align: center;width:6%;">日期</th>
		                        <th  style="text-align: center;width:6.6%;">昼夜卸车(车)</th>
		                        <th  style="text-align: center;width:6.6%;">铁路调入量(万吨)</th>
		                        <th  style="text-align: center;width:6.6%;">公路调入量(万吨)</th>
		                        <th  style="text-align: center;width:6.6%;">吞吐量(万吨)</th>
		                        <th  style="text-align: center;width:6.6%;">场存(万吨)</th>
		                      </tr>
	                    </thead>
                    <tbody>
                   		<c:forEach items="${dataList}" var="li">
	                      	 <tr>
	                        	<td style="word-break:break-all">${li.riq}</td>
	                        	<td style="word-break:break-all">${li.zhouyxc}</td>
	                        	<td style="word-break:break-all">${li.tieldrl}</td>
	                        	<td style="word-break:break-all">${li.gongldrl}</td>
	                        	<td style="word-break:break-all">${li.tuntl}</td>
	                        	<td style="word-break:break-all">${li.changc}</td>
	                    
	                        </tr>
	                      </c:forEach>
                    </tbody>
                  </table>
                </div><!-- /.box-body -->
              </div><!-- /.box -->

            </div><!--/.col (left) -->
         <!-- right column -->
            <div class="col-md-6" style="width:25%">
              
              <!-- general form elements disabled -->
              <div class="box box-warning">
                <div class="box-header with-border">
                	<i class="fa fa-bullhorn"></i>
                  <h3 class="box-title">本图指标</h3>
                </div><!-- /.box-header -->
                <div class="box-body">
              
                  <input type="hidden" id="zhouyxc1" name="zhouyxc1" value="${zhouyxc1}"/>
                  <input type="hidden" id="tieldrl1" name="tieldrl1" value="${tieldrl1}"/>
                  <input type="hidden" id="gongldrl1" name="gongldrl1" value="${gongldrl1}"/>
                  <input type="hidden" id="tuntl1" name="tuntl1" value="${tuntl1}"/>
                  <input type="hidden" id="changc1" name="changc1" value="${changc1}"/>
             
                    <!-- checkbox -->
                    <div class="form-group">
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" id="zhouyxcBox" name="zhouyxcBox" onclick="clickSum();">昼夜卸车(车)
                        </label>
                      </div>
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" id="tieldrlBox" name="tieldrlBox"  onclick="clickSum();">铁路调入量(万吨)
                        </label>
                      </div>
					  <div class="checkbox">
                        <label>
                          <input type="checkbox" id="gongldrlBox" name="gongldrlBox" onclick="clickSum();">公路调入量(万吨)
                        </label>
                      </div>
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" id="tuntlBox" name="tuntlBox" onclick="clickSum();">吞吐量(万吨)
                        </label>
                      </div>
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" id="changcBox" name="changcBox" onclick="clickSum();">场存(万吨)
                        </label>
                      </div>
                    </div>
                </div><!-- /.box-body -->
              </div><!-- /.box -->
            </div><!--/.col (right) -->
       	</div>
        </div><!-- /.content -->
        </form>
      </div><!-- /.content-wrapper -->
</div>  
</body>
</html>
